<template>
  <div class="app-container">
    <template>
      <div class="filter-container">
        <el-form
          :inline="true"
          :model="searchConf"
          class="demo-form-inline"
          ref="filteForm"
          label-width="80px"
          :label-position="labelPosition"
        >
          <el-form-item label="供应商" prop="supplier_id">
            <el-select v-model="searchConf.supplier_id" filterable placeholder="请选择">
              <el-option
                v-for="item in supplierMap"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="ISBN" prop="isbn">
            <el-input v-model="searchConf.isbn" placeholder="书号"></el-input>
          </el-form-item>
          <el-form-item label="书名" prop="name">
            <el-input v-model="searchConf.name" placeholder="书名"></el-input>
          </el-form-item>
          <el-form-item label="出版社" prop="press">
            <el-input v-model="searchConf.press" placeholder="出版社"></el-input>
          </el-form-item>
          <el-form-item label="店铺类型" prop="store">
            <el-select v-model="searchConf.store" placeholder="请选择">
              <el-option v-for="(item,index) in storeMap" :key="index" :label="item" :value="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="searchConf.status" placeholder="请选择">
              <el-option
                v-for="(item,index) in statusMap"
                :key="index"
                :label="item"
                :value="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间" prop="create_time">
            <el-date-picker
              v-model="searchConf.create_time"
              type="datetimerange"
              align="right"
              unlink-panels
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="更新时间" prop="update_time">
            <el-date-picker
              v-model="searchConf.update_time"
              type="datetimerange"
              align="right"
              unlink-panels
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">查询</el-button>
            <el-button @click="resetForm('filteForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <div>
      <el-button
        :loading="downloadLoading"
        style="margin:0 0 20px 20px;"
        icon="el-icon-document"
        @click="handleDownload"
      >导出 Excel</el-button>
      <el-button v-show="multipleSelection.length" type="danger" @click="multipleDelete">删除</el-button>
      <el-dropdown v-show="multipleSelection.length" @command="handleMultiple" split-butto="true">
        <el-button type="primary">
          批量操作
          <i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(item,key) in statusMap" :key="item" :command="key">{{item}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-tag   effect="plain">订数:{{extend.count}}</el-tag>
      <el-tag  type="danger" effect="plain">总额:{{extend.money}}</el-tag>
    </div>
    <el-table
      ref="orderTable"
      :data="list"
      v-loading="listLoading"
      highlight-current-row
      border
      @selection-change="handleSelectionChange"
    >
      <slot name="prepend" />
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column
        v-for="item in dataConfig"
        :key="item.prop"
        v-bind="item"
        :align="item.align || 'center'"
      >
        <template slot-scope="scope">
          <slot v-if="item.prop == 'supplier'" :scope="scope" :name="item.prop">
            <el-button
              type="text"
              @click="handleClick(scope.row.supplier.id,'supplier_id')"
            >{{ scope.row.supplier.name }}</el-button>
          </slot>
          <slot v-else-if="item.prop == 'status'" :scope="scope" :name="item.prop">
            <el-button
              type="text"
              @click="handleClick(scope.row[item.prop],'status')"
            >{{statusMap[scope.row[item.prop]]}}</el-button>
          </slot>
          <slot v-else-if="item.prop == 'store'" :scope="scope" :name="item.prop">
            <el-button
              type="text"
              @click="handleClick(scope.row[item.prop],'store')"
            >{{storeMap[scope.row[item.prop]]}}</el-button>
          </slot>
          <slot v-else :scope="scope" :name="item.prop">{{ scope.row[item.prop] }}</slot>
        </template>
      </el-table-column>
      <slot name="prepend" />
      <el-table-column :width="100" :label="commonTitle('actions')" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            type="primary"
            icon="el-icon-edit"
            circle
          ></el-button>
          <slot :scope="scope" name="moreButton" />
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="handleDelete(scope.$index, scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="pagination.page"
      :limit.sync="pagination.size"
      @pagination="getList"
    />
    <el-dialog title="书目详情" :visible.sync="dialogFormVisible" :width="deviceWidth">
      <el-form
        :model="dialogForm"
        ref="dialogForm"
        :label-position="labelPosition"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="书号:">{{dialogForm.isbn}}</el-form-item>
        <el-form-item label="书名:">{{dialogForm.name}}</el-form-item>
        <el-form-item label="出版社:">{{dialogForm.press}}</el-form-item>
        <el-form-item label="库存:">{{dialogForm.stock}}</el-form-item>
        <el-form-item label="库位:">{{dialogForm.position}}</el-form-item>
        <el-form-item label="价格:">{{dialogForm.price}}</el-form-item>
        <el-form-item label="供应商:" prop="supplier_id">
          <el-select v-model="dialogForm.supplier_id" filterable placeholder="请选择">
            <el-option
              v-for="item in supplierMap"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="折扣:" prop="discount">
          <el-input style="width:200px" v-model="dialogForm.discount" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="订购数量:">
          <el-input-number v-model="dialogForm.count" :min="1" label="订购数量"></el-input-number>
        </el-form-item>
        <el-form-item label="店铺:">
          <el-radio-group v-model="dialogForm.store">
            <el-radio v-for="(item, index) in storeMap" :label="index" :key="item">{{item}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="formSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "@/utils/mixin";
import { commonTitle } from "@/utils/i18n";
import { orderDataConfig as dataConfig } from "./config";
import { getList, del, multi, edits } from "@/api/order";
import Pagination from "@/components/Pagination";

export default {
  name: "Order",
  mixins: [mixin],
  components: {
    Pagination,
  },
  data() {
    return {
      dataConfig: dataConfig.fields,
      list: [],
      filterForm: {},
      searchConf: dataConfig.filterForm,
      dialogForm: dataConfig.dialogForm,
      dialogFormVisible: false,
      statusMap: [],
      storeMap: {},
      supplierMap: [],
      downloadLoading: false,
      multipleSelection: [],
      submitLoading: false,
      formLabelWidth: "120px",
      pickerOptions: dataConfig.pickerOptions,
      extend:{},
    };
  },
  mounted() {
    this.getList();
  },
  computed: {
    labelPosition() {
      return this.$store.state.app.device !== "mobile" ? "right" : "top";
    },
    deviceWidth() {
      return this.$store.state.app.device !== "mobile" ? "50%" : "90%";
    },
  },
  methods: {
    getList() {
      let vm = this;
      vm.listLoading = true;
      let params = {
        ...vm.pagination,
        filter: vm.filterForm,
      };
      getList(params)
        .then((response) => {
          vm.list = response.data.list;
          vm.total = response.data.count;
          vm.statusMap = response.data.status;
          vm.storeMap = response.data.store;
          vm.supplierMap = response.data.supplier;
          vm.extend = response.data.extend
          vm.listLoading = false;
        })
        .catch(() => {
          vm.listLoading = false;
        });
    },
    submitForm() {
      for (let index in this.searchConf) {
        if (
          this.searchConf[index].length !== 0 ||
          this.searchConf[index].length == "undefined"
        ) {
          this.filterForm[index] = this.searchConf[index];
        }
      }
      this.pagination.page = 1;
      this.getList();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.filterForm = {};
      this.pagination.page = 1;
      this.getList();
    },
    handleClick(data, param) {
      this.searchConf[param] = data;
      this.submitForm();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleDownload() {
      var listData = [];
      if (this.multipleSelection.length) {
        listData = this.multipleSelection;
      } else {
        listData = this.list;
      }
      import("@/vendor/Export2Excel").then((excel) => {
        const tHeader = [
          "书号",
          "书名",
          "出版社",
          "定价",
          "折扣",
          "库位",
          "订数",
        ];
        const filterVal = [
          "isbn",
          "name",
          "press",
          "price",
          "discount",
          "position",
          "count",
        ];
        const list = listData;
        const data = this.formatJson(filterVal, list);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType,
        });
        this.$refs.orderTable.clearSelection();
        this.downloadLoading = false;
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },
    multipleDelete() {
      let vm = this;
      let ids = [];
      this.multipleSelection.forEach(function (v) {
        ids.push(v.id);
      });
      let idStri = ids.join(",");
      del(ids).then((response) => {
        vm.$refs.orderTable.clearSelection();
        vm.getList();
        vm.$message.success(response.msg);
      });
    },
    handleMultiple(command) {
      let vm = this;
      let ids = [];
      this.multipleSelection.forEach(function (v) {
        ids.push(v.id);
      });
      let idStri = ids.join(",");
      let params = {
        ids: ids,
        value: command,
      };
      multi(params).then((response) => {
        vm.getList();
        vm.$refs.orderTable.clearSelection();
        vm.$message.success(response.msg);
      });
    },
    handleDelete(index, row) {
      let vm = this;
      del(row.id).then((response) => {
        vm.list.splice(index, 1);
        vm.$message.success(response.msg);
      });
    },
    handleEdit(index, row) {
      let vm = this;
      vm.dialogFormVisible = true
      vm.dialogForm.isbn = row.isbn
      vm.dialogForm.name = row.name
      vm.dialogForm.press = row.press
      vm.dialogForm.price = row.price
      vm.dialogForm.supplier = row.supplier.name
      vm.dialogForm.supplier_id = row.supplier.id
      vm.dialogForm.stock = row.stock
      vm.dialogForm.position = row.position
      vm.dialogForm.discount = row.discount
      vm.dialogForm.purchase_price = row.purchase_price
      vm.dialogForm.count = row.count
      vm.dialogForm.id = row.id
    },
    formSubmit() {
      let vm = this;
      vm.dialogFormVisible = false;
      let params = vm.dialogForm;
      vm.dialogSubmitLoading = true;
      edits(params).then((response) => {
        vm.dialogFormVisible = false
        vm.dialogSubmitLoading = false
        vm.getList()
        vm.$message.success(response.msg)
      });
    },
    commonTitle,
  },
};
</script>